<template>
	<div class="page">
	
		<div class="page-body">
			<div class="active-box">
				<div class="active-header">
					<div class="active-title">
						<span class="text-s">最新活动</span>
					</div>
				</div>
				<div class="active-center">
					<div class="active" v-for="(i,index) in 2" :key="i" @click="todatalist()">
						<div class="a-img-box">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
						</div>
						<div class="active-footer">
							<p class="act-tit">活动标题</p>
							<p class="act-cent">最新活动介绍</p>
							<p class="time">2050/20/12</p>
						</div>
					</div>
				</div>
				<div class="block">
					<el-pagination background layout="prev, pager, next" :total="100"> </el-pagination>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="line-f"></div>
			<div class="footer-last">
				<div class="footer-left">
					<router-link to="/">更多支持</router-link>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<router-link to="/">帮助中心</router-link>
				</div>
				<div class="footer-right">
					<div class="footer-logo">
						<div class="logo-box-f "><img src="../assets/img/redpanda-logo2.png" /></div>
						<div class="logo-box-h "><img src="../assets/img/REDPANDADAO.png" /></div>
					</div>
					<div class="footer-btn">
						<router-link to="/"><img src="../assets/img/discord.png" /></router-link>
						<router-link to="/"><img src="../assets/img/telegram.png" /></router-link>
						<router-link to="/"><img src="../assets/img/twitter.png" /></router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Header from '../components/Header.vue'
	export default {
		components: {
			Header
		},
		methods: {
			todatalist: function() {
				this.$router.push({
					path: "/activitydist",
					query: {
						id: '1',
					}
				})
			}
		}

	}
</script>

<style scoped>
	.page {
		background-color: #000000;
		overflow: hidden;
	}

	.page-body {
		width: 100%;
		padding-left: 80px;
		padding-right: 80px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.wecome-box {
		width: 100%;
		padding-top: 30px;
		overflow: hidden;
	}

	.text {
		float: left;
		width: 60%;
		color: #fff;
	}

	.title {
		font-size: 32px;
		font-weight: bold;
		letter-spacing: 2px;
		text-align: left;
		margin-top: 20px;
	}

	.content-text {
		font-size: 18px;
		font-style: normal;
		text-indent: 2em;
		letter-spacing: 1px;
		text-align: left;
		line-height: 25px;
		margin-top: 40px;
		word-wrap: break-word;
		padding-bottom: 80px;

	}

	.img-box {
		float: left;
		width: 40%;
		position: relative;
	}

	.img-box img {
		height: 400px;
		position: absolute;
		right: 80px;
		top: -80px;
		cursor: pointer;
	}

	.active-box {
		width: 100%;
		background-color: #000;
		box-sizing: border-box;
		margin-top: 160px;
		margin-bottom: 50px;
	}

	.active-header {
		width: 100%;
		height: 80px;

	}

	.line-box {
		height: 2px;
		margin-top: 39px;
		background-color: #fff;
		width: 40%;
		float: right;
	}

	.left {
		float: left !important;
	}

	.active-title {
		float: left;
		line-height: 80px;
		height: 80px;
		font-size: 28px;
		font-weight: bold;
		color: #fff;
		text-align: center;
	}

	.active-title .text-s {
		margin-top: -40px;
		display: inline-block;
		line-height: 40px;
	}

	.ll {
		height: 28px;
		width: 2px;
		display: inline-block;
		background-color: #fff;
		margin-left: 20px;
		margin-right: 20px;
		line-height: 0px;
	}

	.active-center {
		width: 100%;
		background-color: #000000;
		padding-left: 1%;
		padding-right: 1%;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 50px;
	}

	.active {
		width: 33.3%;
		float: left;
		padding-right: 3%;
		padding-left: 3%;
		box-sizing: border-box;
		cursor: pointer;

	}

	.a-img-box {
		width: 100%;
	}

	.a-img-box img {
		width: 100%;
	}

	.active-footer {
		margin-top: 20px;
		width: 100%;
		background-color: #fff;
		margin-bottom: 100px;
		padding: 20px;
		box-sizing: border-box;
	}

	.act-tit {
		font-size: 18px;
		color: #000000;
		text-align: left;
		margin: 0px;
	}

	.act-cent {
		font-size: 16px;
		color: #666;
		text-align: left;
		text-indent: 2em;
	}

	.time {
		text-align: right;
		color: #888;
		margin-bottom: 0px;
	}

	.line {
		width: 100%;
		background-color: #fff;
		height: 2px;
		margin-bottom: 50px;
	}

	.line-f {
		width: 100%;
		background-color: #fff;
		height: 2px;
	}

	.link-box {
		width: 100%;
		margin-bottom: 50px;
	}

	.link-title {
		font-size: 30px;
		color: #fff;
		text-align: left;
	}

	.links {
		font-style: normal;
		list-style: none;
		display: flex;
		flex-direction: row;
		margin-top: 30px;
		padding: 0px;
	}

	.link {
		flex: 1;
		/* //background-color: #fff; */
		margin-right: 40px;
		cursor: pointer;
	}

	.link img {
		width: 80%;
		margin: auto;
	}

	.footer-last {
		width: 100%;
		padding-left: 20px;
		padding-right: 40px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.footer {
		width: 100%;
		height: 100px;
		overflow: hidden;
	}

	.footer-left {
		float: left;
		width: 400px;

	}

	.footer-left a {
		font-size: 20px;
		font-weight: bold;
		line-height: 100px;
	}

	.footer-right {
		float: right;
		height: 100px;
	}

	.footer-logo {
		float: left;
		height: 100px;
		margin-top: 30px;
	}

	.logo-box-f {
		float: left;

	}

	.logo-box-f img {
		height: 40px;
	}

	.logo-box-h img {
		height: 40px;
	}

	.logo-box-h {
		float: left;
	}

	.footer-btn {
		float: left;
		display: flex;
		flex-direction: row;
		margin-top: 30px;
	}

	.footer-btn a {
		flex: 1;
		margin-left: 30px;
	}
	.block{
		width: 100%;
		text-align: center;
	}
</style>
